var ani = ani || {};
ani.ui = ani.ui || {};
ani.ui.template = ani.ui.template || {};
//templete element

//========ani ui template========
//article template
//form template
ani.ui.template.form = function(formPage){
	//form shell
	var formRoot = ani.ui.generateHTMLMark('form');
	formRoot.attr('id', formPage.containerId);
	$.each(
			formPage.objects,
			function(objId, oneObj){
				formRoot.append(ani.ui.template.form.createElement(oneObj));
			}
		);
	formRoot.append(ani.ui.template.form.createSubmitButton(formPage));
    ani.ui.template.form.bindAsyncForm(formPage, formRoot);
	return formRoot;
}
ani.ui.template.form.createElementLabel = function(element){
    var elemLabel = ani.ui.generateHTMLMark('label');
    elemLabel.attr('for', element.fieldName);
    elemLabel.html(element.title);
    return elemLabel;
}
ani.ui.template.form.createElement = function(element){
	//construct container
	var elemContainer = ani.ui.generateHTMLMark('p');
	//construct label
	if(element.fieldName != null){
        var elemLabel = ani.ui.template.form.createElementLabel(element);
        elemContainer.append(elemLabel);
	}
	//construct element
	var formElem = null;
    if(element.fieldMark == 'form' && element.subObjects.length > 0){
        formElem = ani.ui.template.form.generateSubFormGroupSection(element);
    }else if(element.fieldMark == 'select'){
		formElem = ani.ui.generateHTMLMark(element.fieldMark);
		//values
		var emptyElem = ani.ui.generateHTMLMark('option');
		emptyElem.attr('value', 0);
		emptyElem.html('');
		formElem.append(emptyElem);
		formElem.append(emptyElem);
		for(var optId in element.options){
			var optionElem = ani.ui.generateHTMLMark('option');
			optionElem.attr('value', optId);
			optionElem.html(element.options[optId]);
			formElem.append(optionElem);
		}
	}else{
	    formElem = ani.ui.generateSingleHTMLMark(element.fieldMark);
    }
	formElem.attr("id", element.fieldName);
	formElem.attr("name", element.fieldName);
	if(element.value != null){
	    if(element.fieldMark == "span"){
            formElem.html(element.value);
	    }else{
	        formElem.attr("value", element.value);
	    }
	}
	if(element.fieldType != null){formElem.attr("type", element.fieldType);}
	formElem.attr("placeholder", element.placeHolder);
	elemContainer.append(formElem);
	return elemContainer;
}
ani.ui.template.form.generateSubFormGroupSection = function(subFormObj){
    var subFormContainer = ani.ui.generateHTMLMark('section');
    var subFormGroupSection = ani.ui.generateHTMLMark('section');
    subFormGroupSection.attr('id', subFormObj.fieldName);
    subFormGroupSection.attr('class', 'subFormGroupContainer');
    subFormContainer.append(subFormGroupSection);
    subFormContainer.append(
        ani.ui.template.form.generateAddSubFormButton(subFormObj, subFormGroupSection)
    );
    subFormContainer.append(
        ani.ui.template.form.generateSubFormValueField(subFormObj.fieldName)
    );
    return subFormContainer;
}
ani.ui.template.form.generateSubFormValueField = function(fieldId){
    var subFormValueRegion = ani.ui.generateHTMLMark('input');
    subFormValueRegion.attr('id', fieldId);
    subFormValueRegion.attr('name', fieldId);
    subFormValueRegion.attr('class', 'subFormValue');
    subFormValueRegion.attr('type', 'hidden');
    return subFormValueRegion;
}
ani.ui.template.form.generateAddSubFormButton = function(subFormObj, container){
    var addSubFormLink = ani.ui.generateHTMLMark('a');
    addSubFormLink.attr('href', '#');
    addSubFormLink.html('Add');
    var addSubFormButton = ani.ui.generateHTMLMark('div');
    addSubFormButton.append(addSubFormLink);
    addSubFormButton.bind(
        'click',
        function(){
            container.append(ani.ui.template.form.generateSubForm(subFormObj))
        }
    );
    return addSubFormButton;
}
ani.ui.template.form.generateSubForm = function(subFormObj){
    var subForm = ani.ui.generateHTMLMark('form');
    subForm.attr('class', 'subform');
    $.each(
        subFormObj.subObjects,
        function(objId, oneObj){
            subForm.append(ani.ui.template.form.createElement(oneObj));
        }
    );
    subForm.append(ani.ui.template.form.generateDeleteSubFormButton());
    return subForm;
}
ani.ui.template.form.generateDeleteSubFormButton = function(){
    var deleteSubFormButton = ani.ui.generateHTMLMark('div');
    deleteSubFormButton.bind(
        'click',
        function(){
            deleteSubFormButton.parents('.subform')[0].remove();
        }
    );
    var deleteSubFormLink = ani.ui.generateHTMLMark('a');
    deleteSubFormLink.attr('href', '#');
    deleteSubFormLink.html('Remove');
    deleteSubFormButton.append(deleteSubFormLink);
    return deleteSubFormButton;
}
ani.ui.template.form.createSubmitButton = function(formPage){
	var submitButton = ani.ui.generateHTMLMark('input');
	submitButton.attr('type', 'submit');
	submitButton.attr('value', formPage.targetButtonValue);
	submitButton.bind('click', ani.ui.template.form.generateSubFormsValue);
	return submitButton;
}
ani.ui.template.form.bindAsyncForm = function(formPage, container){
    var options = {
        url: formPage.targetUrl,
        type: 'POST',
        beforeSerialize: ani.ui.template.form.generateSubFormsValue,
        success: function(responseObj){
            if(ani.ui.isSuccess(responseObj)){
                alert(responseObj.message);//TODO
                ani.ui.triggerMenuElement(formPage.redirectUrl)
            }else{
                ani.ui.notice.pageMessage(responseObj.message, container);
            }
        }
    };
    container.ajaxForm(options);
}
ani.ui.template.form.generateSubFormsValue = function(){
    var containers = $('.subFormGroupContainer');
    for(var idx = 0; idx < containers.size(); idx++){
        var curSubFormContainer = $('.subFormGroupContainer:eq(' + idx + ')');
        var jsonStr = ani.ui.template.form.convertInSectionFormsValueToJsonArrayStr(curSubFormContainer);
        $("input[id='" + curSubFormContainer.attr('id') + "'][type='hidden']").attr('value', jsonStr);
    }
}
ani.ui.template.form.convertInSectionFormsValueToJsonArrayStr = function(sectionObj){
    var subForms = [];
    for(var idx = 0; idx < sectionObj.children('.subform').size(); idx++){
        subForms.push(
            ani.ui.convertFormToObject(
                sectionObj.children('.subform:eq(' + idx + ')')
            )
        )
    }
    return JSON.stringify(subForms);
}
ani.ui.template.form.submitCallback = function(){
    alert("anicloud callback");
}